<template>
	<view class="bi-follow-official-account">
		<ui-tips class="bi-follow-official-account__tips" :shadow="shadow" type="black" @close="handleClose">
			<text class="bi-follow-official-account__btn" @click="handleFollowClick">关注</text>
			<text class="bi-follow-official-account__text">关注公众号，及时获取订单状态</text>
		</ui-tips>
		<ui-popup 
			v-model="showOfficialPopup"
			type="center"
		>
			<follow-official-account-panel @confirm="handleConfirmClick"></follow-official-account-panel>
		</ui-popup>
	</view>
</template>

<script>
	import FollowOfficialAccountPanel from './follow-official-account-panel.vue'
	
	export default {
		name: 'BiFollowOfficialAccount',
		props: {
			shadow: {
				type: Boolean,
				default: false
			}
		},
		components: {
			FollowOfficialAccountPanel
		},
		data () {
			return {
				showOfficialPopup: false
			}
		},
		methods: {
			handleClose () {
				this.$emit('close')
			},
			handleFollowClick () {
				this.showOfficialPopup = true
			},
			handleConfirmClick () {
				this.showOfficialPopup = false
			}
		}
	}
</script>

<style>
	.bi-follow-official-account__btn{
		height: 22px;
		line-height: 22px;
		background-color: #F47554;
		color: #fff;
		padding: 0 12px;
		border-radius: 11px;
		display: inline-block;
		font-size: 12px;
		float: right;
	}
</style>